<template>
    <div class="fcontainer">
        <div class="menu-div" :style="menu_style">
            <div class="menu-btn" @click="menufn">
                <MenuFoldOutlined ref="menu_btn" :rotate="reduced ? 180 : 0" />
            </div>
            <a-menu v-model:selectedKeys="state.selectedKeys" class="menu" mode="inline" :items="items"
                :inline-collapsed="reduced" :theme="state.theme" @click="menu_select"></a-menu>
        </div>
        <div class="mcontent"><router-view></router-view></div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive, onMounted, h } from 'vue';
import type { MenuMode, MenuTheme, ItemType } from 'ant-design-vue';
import { MenuFoldOutlined, CalendarOutlined, StarOutlined, ShakeOutlined } from '@ant-design/icons-vue';

const route = useRoute();
const router = useRouter();
const menu_btn = ref(null);
const reduced = ref(false);
const menu_style = reactive({ width: '200px', height: '100vh' });
const state = reactive({ mode: 'inline' as MenuMode, theme: 'dark' as MenuTheme, selectedKeys: ['/index'] });

const menufn = () => {
    reduced.value = !reduced.value;
    menu_style.width = reduced.value ? '80px' : '200px';
};
const menu_select = (item) => { router.push(item.key) };
const getItem = (label: string, key: string, icon?: any, children?: ItemType[], type?: 'group'): ItemType => { return { key, icon, children, label, type } as ItemType };
const items: ItemType[] = reactive([
    getItem('美食日历', '/index', h(CalendarOutlined)),
    getItem('美食打分', '/index/score', h(StarOutlined)),
    getItem('随机美食', '/index/random', h(ShakeOutlined))
]);
onMounted(() => state.selectedKeys = [route.path])
</script>

<style scoped lang="less">
.fcontainer {
    width: 100%;
    height: 100vh;
    display: flex;
    flex: 1;

    .menu-div {
        display: flex;
        flex-direction: column;
        z-index: 1000;

        .menu-btn {
            width: 100%;
            height: 20px;
            color: #fff;
            background-color: #001529;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            justify-content: center;
        }

        .menu {
            height: calc(100% - 20px);
        }
    }

    .mcontent {
        width: 100%;
        overflow: hidden;
    }
}
</style>